<template>
  <div>
    <pro-table
      :data="tableData"
      :columns="columns"
      :total="total"
      :tool-button="false"
      @search="commEvent.onSearch"
      :page-change="commEvent.onPageChange"
    >
      <!-- 顶部操作 -->
      <template #tableHeader>
        <el-button type="danger" plain>批量删除</el-button>
      </template>
      <!-- 操作 -->
      <template #operation>
        <el-button link>详情</el-button>
        <el-button type="primary" link @click="$router.push('/experiment/detail')">设备参数</el-button>
        <el-button type="danger" link>删除</el-button>
      </template>
    </pro-table>
  </div>
</template>

<script setup lang="ts">
import { ref, h, onMounted } from "vue"
import ProTable from "@/components/ProTable/index.vue"
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface"
// 参数
const tableRef = ref<ProTableInstance>() // 表格实例
const tableData = ref<any[]>([]) // 表格数据
const total = ref<number>(0) // 数据总数
// 页码参数
const pageParams = ref({
  pageIndex: 1,
  pageSize: 10
})
// 表单配置
const columns: ColumnProps<any>[] = [
  { type: "selection" },
  {
    prop: "sort",
    label: "序号",
    width: 80,
    render: scope => h("span", scope.$index + 1 + (pageParams.value.pageIndex - 1) * pageParams.value.pageSize)
  },
  { prop: "mock", label: "实验名称", width: 180, search: { el: "input" } },
  { prop: "mock", label: "实验类型", width: 180, search: { el: "select" } },
  { prop: "mock", label: "创建人", search: { el: "select" } },
  { prop: "mock", label: "创建时间", width: 180, search: { el: "date-picker" } },
  { prop: "mock", label: "实验开始时间", width: 220 },
  { prop: "mock", label: "实验状态", width: 180 },
  { prop: "operation", label: "操作", width: 180, fixed: "right" }
]
// 方法
const commEvent = {
  // 获取表格数据
  getTableData: async (params: any) => {
    // const { data } = await asyncFun(params)
    tableData.value = [{ mock: "001" }]
    total.value = 1
  },
  // 查询
  onSearch: () => {
    tableRef.value?.search()
    pageParams.value.pageIndex = 1
    const _search = tableRef.value?.searchParam
    commEvent.getTableData({ ...pageParams.value, ..._search })
  },
  // 分页
  onPageChange: (page: number, size: number) => {
    pageParams.value.pageIndex = page
    pageParams.value.pageSize = size
    const _search = tableRef.value?.searchParam
    commEvent.getTableData({ ...pageParams.value, ..._search })
  }
}
onMounted(() => {
  commEvent.getTableData(pageParams.value)
})
</script>

<style lang="scss" scoped></style>
